<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		body{
			width: 100%;
		}
		
		.all{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
		}
		
		.out{
			width: 96%;
			border-radius: 10px;
			margin-top: 20px;
			box-sizing: border-box;
			padding: 10px;
		}
		
		.button{
			width: 50%;
			background-color: black;
			color: white;
			border-radius: 10px;
			margin: 20px 0px;
			box-sizing: border-box;
			padding: 20px 0px;
			text-align: center;
			font-size: 28px;
			cursor: pointer;
			
		}
		
		
		.in{
			width: 96%;
			border-radius: 10px;
			margin-top: 20px;
			box-sizing: border-box;
		}
		
		.in-input{
			width: 100%;
			height: 300px;
		}
		
	</style>
	<body>
		<div class="all">
			
			<!-- 标题 -->
			<h1 class="title">class提取机</h1>
			
			<!-- 输出 -->
			<div class="out">
				<textarea class="in-input"></textarea>
			</div>
			
			<div onclick="extractTap()" class="button">提取</div>
			
			<!-- 输入 -->
			<div class="in">
				<textarea class="in-input"></textarea>
			</div>
		</div>
		
		<script type="text/javascript">
			
			function unique(arr) {
				return Array.from(new Set(arr))
			}
			
			
			function extractTap(){
				// 获取到文本
				var ls = '';
				ls = document.getElementsByClassName("in-input")[1].value;
				
				// 正则筛出class
				ls = ls.match(/class=["'][a-z-]+["']/gi);
				for(var a = 0;a<ls.length;a++){
					ls[a] = ls[a].substring(7);
					ls[a] = ls[a].substr(0 , ls[a].length - 1);
				}
				ls = unique(ls);
				var ls1 = '';
				ls.forEach(function(item,index){
					ls1 += '.'+ls[index]+'{\n\t\n}\n\n';
				})
				console.log(ls1);
				
				document.getElementsByClassName("in-input")[0].value = ls1;
			}
			
		</script>
	</body>
</html>
